<template>
	<el-card shadow="never" :label="$t('index.person.theme')">
		<el-form ref="form" label-width="140" style="margin-top:20px;">
			<el-form-item :label="$t('user.nightmode')">
				<el-switch v-model="config.dark" inline-prompt active-icon="el-icon-moon" inactive-icon="el-icon-sunny"></el-switch>
				<div class="el-form-item-msg">{{ $t('user.nightmode_msg') }}</div>
			</el-form-item>
			<el-form-item :label="$t('index.person.color')">
				<el-color-picker v-model="config.colorPrimary" :predefine="colorList">></el-color-picker>
			</el-form-item>
			<el-form-item :label="$t('user.language')">
				<el-select v-model="config.lang">
					<el-option label="简体中文" value="zh-cn"></el-option>
					<el-option label="English" value="en"></el-option>
				</el-select>
				<div class="el-form-item-msg">{{ $t('user.language_msg') }}</div>
			</el-form-item>
		</el-form>
	</el-card>
	<el-card shadow="never" :header="$t('index.person.setting')" style="margin-top:20px;">
		<el-form ref="form" label-width="140px" style="margin-top:20px;">
			<el-form-item :label="$t('index.person.logout')">
				<el-select v-model="config.autoExit">
					<el-option :label="$t('index.person.never')" :value="0"></el-option>
					<el-option :label="1+$t('index.person.minute')" :value="1"></el-option>
					<el-option :label="5+$t('index.person.minute')" :value="5"></el-option>
					<el-option :label="10+$t('index.person.minute')" :value="10"></el-option>
					<el-option :label="15+$t('index.person.minute')" :value="15"></el-option>
					<el-option :label="20+$t('index.person.minute')" :value="20"></el-option>
					<el-option :label="25+$t('index.person.minute')" :value="25"></el-option>
					<el-option :label="30+$t('index.person.minute')" :value="30"></el-option>
					<el-option :label="35+$t('index.person.minute')" :value="35"></el-option>
					<el-option :label="40+$t('index.person.minute')" :value="40"></el-option>
					<el-option :label="45+$t('index.person.minute')" :value="45"></el-option>
					<el-option :label="50+$t('index.person.minute')" :value="50"></el-option>
					<el-option :label="55+$t('index.person.minute')" :value="55"></el-option>
					<el-option :label="60+$t('index.person.minute')" :value="60"></el-option>
				</el-select>
				<div class="el-form-item-msg">{{$t('index.person.rule')}}</div>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script>
	import colorTool from '@/utils/color'

	export default {
		data() {
			return {
				colorList: ['#409EFF', '#009688', '#536dfe', '#ff5c93', '#c62f2f', '#fd726d'],
				config: {
					lang: this.$TOOL.data.get('APP_LANG') || this.$CONFIG.LANG,
					dark: this.$TOOL.data.get('APP_DARK') || false,
					colorPrimary: this.$TOOL.data.get('APP_COLOR') || this.$CONFIG.COLOR || '#409EFF',
					autoExit: this.$TOOL.data.get('AUTO_EXIT') || 0,
				}
			}
		},
		watch:{
			'config.dark'(val){
				if(val){
					document.documentElement.classList.add("dark")
					this.$TOOL.data.set("APP_DARK", val)
				}else{
					document.documentElement.classList.remove("dark")
					this.$TOOL.data.remove("APP_DARK")
				}
			},
			'config.lang'(val){
				this.$i18n.locale = val
				this.$TOOL.data.set("APP_LANG", val);
			},
			'config.colorPrimary'(val){
				if(!val){
					val = '#409EFF'
					this.config.colorPrimary = '#409EFF'
				}
				document.documentElement.style.setProperty('--el-color-primary', val);
				for (let i = 1; i <= 9; i++) {
					document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(val,i/10));
				}
				for (let i = 1; i <= 9; i++) {
					document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, colorTool.darken(val,i/10));
				}
				this.$TOOL.data.set("APP_COLOR", val);
			},
			'config.autoExit'(val){
				if(val == 0){
					this.$TOOL.data.remove("AUTO_EXIT")
				}else{
					this.$TOOL.data.set("AUTO_EXIT", val)
				}
			},
		},
	}
</script>

<style>
</style>
